<template>
	<view>
		<list :list="list" :isBook='false'></list>
		
		<view class="u-padding-20">
			<u-section title="包厢预定" :arrow='false' :right='false'></u-section>
		</view>
		<u-tabs :list="nav" :current="current" @change="change" bg-color='transparen'></u-tabs>
		<view class="u-flex u-row-between" style="flex-wrap: wrap;width:700rpx;margin:auto">
		
			<view v-if="tableList.length" v-for="(item,index) in tableList" :key="index" :style="{'background':item.color}"
				class="u-padding-20" style="position: relative;overflow: hidden;width:49%;color:#fff;border-radius:10rpx;margin-top:20rpx">
				<view style="position: absolute;right: -40rpx;top: -60rpx;">
					<w-wave :txt="nav[current].name">
						<view slot='center'>
							<u-image src='' width='40' height="40" shape='circle'></u-image>
						</view>
					</w-wave>
				</view>
		
				<view>￥{{item.basePrice}}/{{item.baseTime}}分钟</view>
				<view class='u-font-22 u-margin-top-10 u-margin-bottom-10'>计费规则</view>
				<view class="u-flex u-row-between">
					<view>
						{{item.carportName}}
					</view>
					<view class=''>
						<u-button  @click='openDesk(item)' v-if="item.status==1" size='mini' :custom-style="{color:'#FF4646',background:'#ffc3c4'}" shape="circle">
							对局中</u-button>
						<u-button v-if="item.status==3" size='mini' :custom-style="{color:'#5766B9',background:'#b5ccf9'}" shape="circle">
							待开放</u-button>
						<u-button v-if="!item.status" size='mini' :custom-style="{color:'#fff',background:'#00A137'}" shape="circle"
							@click='openDesk(item)'>
							立即开台</u-button>
						<u-button  v-if="item.status==2"  size='mini' :custom-style="{color:'#fff',background:'#F9A825'}" shape="circle">
							清洁中</u-button>
					</view>
				</view>
			</view>
		
		</view>
		
		<u-popup v-model="show" mode='center'>
			<view style="background: #fff;width: 700rpx;margin: auto;">
				<tags :user='user'  :info='info' :tableInfo='tableInfo' @ok='SureTags' @endTable='endTable' v-if="show"></tags>
			</view>
		</u-popup>
			
		<wr-state ref='mask' icon='checkmark-circle-fill' iconcolor='#52C41A' tags=' ' content="开台成功" @ready='ready'>
		</wr-state>
		
	</view>
</template>

<script>
	import list from './components/list.vue'
	import wxLocation from '@/common/location.js';
	import tags from '../scan/components/tags.vue'
	export default {
		components: {
			list,
			tags
		},
		data() {
			return {
				list: [], 
				id: '',
				carport:[],
				show: false,
				tableList: [],
				nav: [{
						name: '台球'
					},
					{
						name: '棋牌'
					},
				],
				current: 0,
				
				info: {},
				
				tableInfo: {},
				user: ''

			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;

			}
			this.getCarport()
			

		},
		onShow() {
			this.storeDetail()
		},
		methods: {
			openDesk(item) {
				this.$u.post('/index/carportDetail', {
					id: item.id,
				}).then(res => {
					this.tableInfo=res;
					this.show=true
				
					
				})
			},
			changeColor(res) {
				res.forEach((item, index) => {
					if (item.status == 3) {
						item.color = 'linear-gradient(180deg,#b5cdf1,#dfe8f5)'
					}
					if (item.status == 1) {
						item.color = ' linear-gradient(180deg,#f07a7d, #faae96 );'
					}
					if (item.status == 0) {
						item.color = 'linear-gradient(180deg,#27b67d, #18ed83);'
					}
					if (item.status == 2) {
						item.color = 'linear-gradient(180deg,#f9a825, #ffdda7 );'
					}
				})
				this.tableList = res;
			},
	endTable(e) {
		uni.navigateTo({
			url: '/pages/scan/total?id=' + e
		})
		this.show = false
	},
			getCarport() {
				this.$u.post('/index/carport', {
					store_id: this.id,
				}).then(res => {
					this.carport=res
					this.changeColor(res)
				})
			
			},
			storeDetail() {
				if(!this.$store.state.userAddress){
					const wx = new wxLocation();
					wx.getAddress().then(res => {
						this.$u.post('/index/storeDetail', {
							store_id: this.id,
							lat: res.result.location.lat,
							lng: res.result.location.lng,
						}).then(res => {
							this.list = [res];
							this.info = res;
							resolve(res)
						})
					}).catch(err => {
					
					})
				}else{
					this.$u.post('/index/storeDetail', {
						store_id: this.id,
						lat: this.$store.state.userAddress.result.location.lat,
						lng: this.$store.state.userAddress.result.location.lng,
					}).then(res => {
						this.list = [res];
						this.info = res;
					})
					
				}
				


			},
		}
	}
</script>

<style>
</style>